<template>
	<view class="ys">
		<view class="list">
			<view class="item" @click="gerRole(1)">
				<view class="left">
					<image src="/static/img/bj.png" class="simg" mode="widthFix"></image>
				</view>
				<view class="right">
					租客
				</view>
			</view>
			<view class="item" @click="gerRole(2)">
				<view class="left">
					<image src="/static/img/wxiu.png" mode="widthFix"></image>
				</view>
				<view class="right">
					房东
				</view>
			</view>
			<view class="item" @click="gerRole(3)">
				<view class="left">
					<image src="/static/img/gj.png" class="simg" mode="widthFix"></image>
				</view>
				<view class="right">
					管理员
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			let role = this.$store.state.role
			this.toRolePage(role)
		},
		methods: {
			gerRole(role) {
				this.$store.commit('text', role)
				this.toRolePage(role)
			},
			toRolePage(role) {
				if (role === 1) {
					uni.redirectTo({
						url: '/pages/tenant/index'
					})
				} else if (role == 2) {
					uni.redirectTo({
						url: '/pages/landlord/index'
					})
				} else if (role == 3) {
					uni.redirectTo({
						url: '/pages/admin/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to bottom, #ff94664d, transparent 80%) no-repeat;
	}

	.list {
		padding: 0 5%;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		box-sizing: border-box;
		transform: translate(-50%, -50%);

		.item {
			background: rgba(93, 173, 254, 0.2);
			margin-bottom: 25px;
			box-shadow: 0 0 10px #ccc;
			font-weight: bold;
			font-size: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90px;
			line-height: 90px;
			border-radius: 8px;

			&:nth-child(2) {
				background: rgba(78, 81, 255, 0.08);
			}

			&:nth-child(3) {
				background: rgba(50, 130, 234, 0.1);
			}

			.left {
				width: 20%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30px;

				image {
					width: 60px;
				}

				.simg {
					width: 100px;
				}
			}

			.right {
				width: 25%;
			}
		}
	}
</style>